<template>
  <div class="p-3">
    <div class="position-relative mb-2">
      <div class="header-title">徐工农机立体仓库数据中心看板</div>
      <a href="#" class="position-absolute header-warehouse" @click.prevent="exit_()">{{ warehouse }}</a>
      <span class="position-absolute header-time">{{ datetimeInfo }}</span>
    </div>

    <div class="d-flex mb-2 bgcolor-dark" style="height: 5.5rem;">
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">工作站</div>
        <div class="text-primary fw-bold fs-2 text-center">3/3</div>
      </div>
      <div class="py-2 border-start border-primary" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">今日入库订单</div>
        <div class="text-primary fw-bold fs-2 text-center">10</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">入库物料数</div>
        <div class="text-primary fw-bold fs-2 text-center">36</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">待上架</div>
        <div class="text-primary fw-bold fs-2 text-center">0</div>
      </div>
      <div class="py-2 border-start border-primary" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">今日出库订单</div>
        <div class="text-primary fw-bold fs-2 text-center">47</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已完成订单</div>
        <div class="text-primary fw-bold fs-2 text-center">40</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">缺件订单</div>
        <div class="text-primary fw-bold fs-2 text-center">7</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已发货数</div>
        <div class="text-primary fw-bold fs-2 text-center">115</div>
      </div>
    </div>

    <div class="row gx-2" style="height: calc(100vh - 11.5rem)">
      <div class="col-2" style="height: 100%;">
        <div class="bgcolor-dark mb-2" style="height: calc((100% - 1rem)/3)">
          <div class="text-white text-center fw-bolder py-2 border-bottom border-dark" style="height: 2.6rem;">已完成订单
          </div>
          <div ref="autoplayingRef1" class="carousel slide overflow-hidden" style="height: calc(100% - 2.6rem);">
            <div class="carousel-inner">
                <div v-for="item, index in autoplayingChunk1" class="carousel-item" :class="{ 'active': index == 0 }">
                    <div :key="item.id" class="text-white p-2 d-flex">
                      <div><svg class="bi text-success"><use href="#record-fill" /></svg></div>
                      <div class="ms-1">
                        <div>{{ item.orderno }} 已齐套</div>
                        <div class="fw-bold">组件 {{ item.compno }}</div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="carousel-indicators carousel-indicators-custom">
              <template v-for="item, index in autoplayingChunk1">
                <button type="button" :data-bs-slide-to="index" :class="{ 'active': index == 0 }"></button>
              </template>
            </div>
          </div>
        </div>
        <div class="bgcolor-dark mb-2" style="height: calc((100% - 1rem)/3)">
          <div class="text-white text-center fw-bolder py-2 border-bottom border-dark" style="height: 2.6rem;">作业中订单
          </div>
          <div ref="autoplayingRef2" class="carousel slide overflow-hidden" style="height: calc(100% - 2.6rem);">
            <div class="carousel-inner">
                <div v-for="item, index in autoplayingChunk2" class="carousel-item" :class="{ 'active': index == 0 }">
                    <div :key="item.id" class="text-white p-2 d-flex">
                      <div><svg class="bi text-primary"><use href="#record-fill" /></svg></div>
                      <div class="ms-1">
                        <div>{{ item.orderno }} 作业中</div>
                        <div class="fw-bold">组件 {{ item.compno }}</div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="carousel-indicators carousel-indicators-custom">
              <template v-for="item, index in autoplayingChunk2">
                <button type="button" :data-bs-slide-to="index" :class="{ 'active': index == 0 }"></button>
              </template>
            </div>
          </div>
        </div>
        <div class="bgcolor-dark" style="height: calc((100% - 1rem)/3)">
          <div class="text-warning text-center fw-bolder py-2 border-bottom border-dark" style="height: 2.6rem;">异常订单
          </div>
          <div ref="autoplayingRef3" class="carousel slide overflow-hidden" style="height: calc(100% - 2.6rem);">
            <div class="carousel-inner">
                <div v-for="item, index in autoplayingChunk3" class="carousel-item" :class="{ 'active': index == 0 }">
                    <div :key="item.id" class="text-white p-2 d-flex">
                      <div><svg class="bi text-warning"><use href="#record-fill" /></svg></div>
                      <div class="ms-1">
                        <div>{{ item.orderno }} 缺件</div>
                        <div class="fw-bold">组件 {{ item.compno }}</div>
                        <div>缺件物料 {{ item.mno }}</div>
                        <div>缺件数量 {{ item.q }}</div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="carousel-indicators carousel-indicators-custom">
              <template v-for="item, index in autoplayingChunk3">
                <button type="button" :data-bs-slide-to="index" :class="{ 'active': index == 0 }"></button>
              </template>
            </div>
          </div>
        </div>
      </div>

      <div class="col-8" style="height: 100%;">
        <div class="mb-2" style="height: calc((100% - 0.5rem)/2)">
          <div class="row gx-1" style="height: 100%;">
            <div class="col-4" style="height: 100%;">
              <PieStorageLocUsageSuammryBlock></PieStorageLocUsageSuammryBlock>
            </div>
            <div class="col-4" style="height: 100%;">
              <BarStorageLocLaneUsageSummaryBlock></BarStorageLocLaneUsageSummaryBlock>
            </div>
            <div class="col-4" style="height: 100%;">
              <PieStorageMaterialChangeSummaryBlock></PieStorageMaterialChangeSummaryBlock>
            </div>
          </div>
        </div>
        <div style="height: calc((100% - 0.5rem)/2)">
          <LineOrderMonthWorkSummaryBlock></LineOrderMonthWorkSummaryBlock>
        </div>
      </div>

      <div class="col-2" style="height: 100%;">
        <div class="bgcolor-dark" style="height: 100%;">
          <div class="text-danger text-center fw-bolder py-2 border-bottom border-dark" style="height: 2.6rem;">异常信息</div>
          <ul class="list-unstyled text-white p-2 overflow-hidden" style="height: calc(100% - 2.6rem);">
            <TransitionGroup>
                    <li v-for="item in execeptioninfos" :key="item.id" class="mb-3" style="word-break:break-all;">
                      <svg class="bi text-danger"><use href="#record-fill" /></svg>{{ item.text }}
                    </li>
                  </TransitionGroup>    
                  </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { format } from 'date-fns'
import { zhCN } from 'date-fns/locale'
import { useRouter } from 'vue-router'
import { Carousel } from 'bootstrap';
import { padStart } from 'lodash-es'


//import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

import PieStorageLocUsageSuammryBlock from '@/views/pie-storageLocUsageSuammryBlock.vue';
import BarStorageLocLaneUsageSummaryBlock from '@/views/bar-storageLocLaneUsageSummaryBlock.vue';
import PieStorageMaterialChangeSummaryBlock from '@/views/pie-storageTimeSummaryBlock.vue';
import LineOrderMonthWorkSummaryBlock from '@/views/line-orderMonthWorkSummaryBlock.vue';

import useWarehouseStore from '@/stores/warehouse.js';

const router = useRouter();

const warehouseStore = useWarehouseStore();

const datetimeInfo = ref('');
const warehouse = ref(warehouseStore.getWarehouse());

const autoplayingRef1 = ref(null);
const autoplayingRef2 = ref(null);
const autoplayingRef3 = ref(null);
onMounted(() => {
  startDatetime();

  //已完成订单
  setTimeout(() => {
    var carousel = new Carousel(autoplayingRef1.value, {
      interval: 3000,
      ride: 'carousel',
      touch: false,
      pause: false,
    })
    autoplaying1(carousel);
  }, 1000);

  //作业中订单
  setTimeout(() => {
    var carousel = new Carousel(autoplayingRef2.value, {
      interval: 3000,
      ride: 'carousel',
      touch: false,
      pause: false,
    })
    autoplaying2(carousel);
  }, 2000);

  //异常订单
  setTimeout(() => {
    var carousel = new Carousel(autoplayingRef3.value, {
      interval: 3000,
      ride: 'carousel',
      touch: false,
      pause: false,
    })
    autoplaying3(carousel);
  }, 3000);

    //异常信息
    setTimeout(() => {
      fetchExceptionInfo();
  }, 300);

});


//获取已完成订单
const autoplayingChunk1 = ref([]);
function autoplaying1(carousel) {
  autoplayingChunk1.value = [];
  var len = Math.floor(Math.random() * 10)
  console.log(len);
  autoplayingChunk1.value.push({
    id: 1, 
    orderno: `LL-2411060071`,
    compno:  `CA09010301`
  },
  {
    id: 2, 
    orderno: `LL-2411060069`,
    compno:  `CA09010041`
  },
  {
    id: 3, 
    orderno: `LL-2411060064`,
    compno:  `CA090103301`
  },
  {
    id: 4, 
    orderno: `LL-2411060061`,
    compno:  `CA0901021`
  },
  {
    id: 5, 
    orderno: `LL-2408120215`,
    compno:  `CA09010012`
  }, ), 
  carousel.to(0);

  setTimeout(() => {
    autoplaying1(carousel);
  }, 120*1000);
}

//获取作业中订单
const autoplayingChunk2 = ref([]);
function autoplaying2(carousel) {
  autoplayingChunk2.value = [{
      id: 1, 
      orderno:`LL-2411060092`,
      compno:`CA08018038`
  },{
      id: 2, 
      orderno:`LL-2411060094`,
      compno:`CA08015319`
  },{
      id: 3, 
      orderno:`LL-2411060070`,
      compno:`CA08018011`
  },{
      id: 4, 
      orderno:`LL-2411050339`,
      compno:`CA08018013`
  },
  
  ];

  carousel.to(0);

  setTimeout(() => {
    autoplaying2(carousel);
  }, 120*1000);
}

//获取异常订单
const autoplayingChunk3 = ref([]);
function autoplaying3(carousel) {
  autoplayingChunk3.value = [
    {
      id: 1, 
      orderno:`LL-2411060070`,
      compno:`CA09314075`,
      mno:'5042000186',
      q:'10'
  },{
      id: 2, 
      orderno:`LL-2411050339`,
      compno:`CA09314031`,
      mno:'5042000154',
      q:'10'
  },{
      id: 3, 
      orderno:`LL-2411050339`,
      compno:`CA09314031`,
      mno:'5042000367',
      q:'5'
  }
    ];

  carousel.to(0);

  setTimeout(() => {
    autoplaying3(carousel);
  }, 120*1000);
}

//获取异常信息
const execeptioninfos = ref([]);
function fetchExceptionInfo() {
  execeptioninfos.value = [{
      id: 1, text: '扫描到无效料箱条码，请确认条码是否正常。'
    },{
      id: 2, text: '料箱超宽，请整理后重新入库.箱码:A00000003135。'
    }];
  var len = Math.floor(Math.random() * 6)
  console.log(len);
  /** 
  for (var i = len; i > 0; i--) {
    execeptioninfos.value.push({
      id: i, text: '异常信息异常信息异常信息异常信息异常信息异常信息' + i
    })
  }
  */
  setTimeout(() => {
    fetchExceptionInfo();
  }, 5*1000);
}

function startDatetime() {
  datetimeInfo.value = format(new Date(), 'yyyy-MM-dd(cccc) HH:mm:ss', { locale: zhCN });
  setTimeout(() => {
    startDatetime();
  }, 1000);
}

function exit_() {
  warehouseStore.clearWarehouse();
  router.push('/warehouse-select');
}
</script>


<style scoped>
.header-title {
  background: url('@/assets/header-title-bg.png') center no-repeat;
  background-size: 100% 100%;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  font-size: 1.5rem;
  color: #bde4ff;
  letter-spacing: 0.25rem;
}

.header-warehouse {
  left: 0;
  bottom: -0.5rem;
  font-size: 1.25rem;
  color: #bde4ff;
}

.header-time {
  right: 0;
  bottom: -0.5rem;
  font-size: 1.25rem;
  color: #bde4ff;
}

.bgcolor-dark{
  background-color: #100C2A;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
